<template>
  <div id="app" class="app-container">
    <img src="./assets/logo.png">
    <el-form :model="ruleForm"  ref="ruleForm" :inline="true">
      <el-form-item  prop="name">
        
        <el-autocomplete style="width:500px"
        prefix-icon="el-icon-search"
        class="inline-input"
        v-model="ruleForm.name"
        :fetch-suggestions="querySearch"
        :trigger-on-focus="false"
      ></el-autocomplete>
        <el-button type="primary" style="width: 100px" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item  prop="name">
        
      </el-form-item>
    </el-form>

    <select-add :selectValue="selectValue" :options='options' @select-change="change" :listurl="listurl" :addurl="addurl" :content="content"/>
  </div>
</template>

<script>
import selectAdd from './components/select-add'
import request from './plugins/request.js'
export default {
  name: 'app',
  components:{selectAdd},
  data(){
    return{
      ruleForm:{
        name:""
      },
      restaurants:[],
      options:[{value:"苹果", docCount:"1"}],
      selectValue:undefined,
      listurl:"http://localhost:8083/es/hot",
      addurl:"",
      content:`<el-form ref="addSelectForm" :model="addSelect">
            <el-form-item label="顯示">
                <el-input v-model="addSelect.value"></el-input>
            </el-form-item>
            <el-form-item label="數值">
                <el-input v-model="addSelect.docCount"></el-input>
            </el-form-item>
        </el-form>`
    }
    
  },
  created() {
  },
  methods: {
    change(value){
      this.selectValue = value;
      console.log(value, this.selectValue, "change")
    },
    search(){
      console.log(this.$route)
      this.$router.push({path:'/search',query:{keyWord:this.ruleForm.name}})
      //window.location.href="/search?keyWord="+this.ruleForm.name+"&type=web&page=0&size=10"
      
    },
    querySearch(queryString, cb){
      //this.restaurants = [{value:'spring'},{value:'mybatis'}]
      request.get('http://localhost:8083/es/hot',{})
                .then(response=> {
                  this.restaurants = response.data
                  cb(this.restaurants);
                })
                .catch(error=> {
                    console.log(error);

                });
      
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
